<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	template="/templates/prime.xhtml">

	<ui:define name="content">
		<h:form id="form" prependId="false">
			<p:growl id="growl" showDetail="true"/> 
			
			<!-- Filter does not work with treeTable -->
			<p:treeTable id="tree" value="#{categoryBean.root}" var="category">
				<f:facet name="header">  
            		Category Viewer
        		</f:facet> 
				<p:column style="width:150px">  
            		<f:facet name="header">  
                		Title
            		</f:facet>  
            		<h:outputText value="#{category.title}" />  
        		</p:column>
				<p:column style="width:20px">  
            		<f:facet name="header">  
                		ID
            		</f:facet>  
            		<h:outputText value="#{category.id}" />  
        		</p:column>        		     		
				<p:column style="width:150px">  
            		<f:facet name="header">  
                		Full Title
            		</f:facet>  
            		<h:outputText value="#{category.fullTitle}" />  
        		</p:column>      		
        		<p:column style="width:5px">  
            		<p:commandLink async="true" update=":form:accordion" oncomplete="detailsDialog.show()" title="View Detail" styleClass="ui-icon ui-icon-search">  
                		<f:setPropertyActionListener value="#{category}" target="#{categoryBean.selected}" />  
            		</p:commandLink>  
        		</p:column> 	
        		<p:column style="width:5px">
        		 	<p:commandLink  async="true" oncomplete="deleteDlg.show()" styleClass="ui-icon ui-icon-trash">
		            	<f:setPropertyActionListener value="#{category}" target="#{categoryBean.selected}" />
	            	</p:commandLink>
	            </p:column>	       		       		        		
			</p:treeTable>

            <p:confirmDialog widgetVar="deleteDlg" id="deleteDialog" header="Delete" message="MSB should do this for you, are you sure?"
                               width="400" showEffect="fade" hideEffect="fade" modal="true" closable="false" severity="alert" dynamic="true">
                  <h:panelGroup layout="block" style="text-align: right">
                      <p:commandButton value="Yes" actionListener="#{categoryBean.delete}" oncomplete="deleteDlg.hide()" update="tree, growl" />
                      <p:commandButton value="No" actionListener="#{categoryBean.cancel}" oncomplete="deleteDlg.hide()" update="growl"/>
                  </h:panelGroup>
            </p:confirmDialog>
            
	        <p:dialog id="details" header="Category Details" fixedCenter="true" width="600" widgetVar="detailsDialog" showEffect="clip" hideEffect="clip" modal="true" resizable="false">
	     		<p:accordionPanel id="accordion" dynamic="true" cache="true"> 
	     			<p:tab title="Metadata"> 
		     			<p:outputPanel id="detailsPanel" width="600">
			     			<h:panelGrid columns="2" cellpadding="5" rendered="#{not empty categoryBean.selected}">  
			     				<h:outputLabel for="title" value="Title:" />
			     				<h:outputText id="title" value="#{categoryBean.selected.title}" />
			
			     				<h:outputLabel for="fullTitle" value="Full Title:" />
			     				<h:outputText id="fullTitle" value="#{categoryBean.selected.fullTitle} "/>
			     				
			     				<h:outputLabel for="description" value="Description:" />
			     				<h:outputText id="description" value="#{categoryBean.selected.description} "/>
			     
			     				<h:outputLabel for="bigBoxUrl" value="Big Box Url:" />
			     				<h:outputText id="bigBoxUrl" value="#{categoryBean.selected.bigBoxUrl} "/>
			     				
			     				<h:outputLabel for="bannerAdUrl" value="Banner Ad Url:" />
			     				<h:outputText id="bannerAdUrl" value="#{categoryBean.selected.bannerAdUrl} "/>
			     				
			     				<h:outputLabel for="thumbnailUrl" value="Thumbnail Url:" />
			     				<h:outputText id="thumbnailUrl" value="#{categoryBean.selected.thumbnailUrl} "/>
			     				
			     				<h:outputLabel for="sortField" value="Sort Field:" />
			     				<h:outputText id="sortField" value="#{categoryBean.selected.sortField} "/>
			     				
			     				<h:outputLabel for="sortOrder" value="Sort Order:" />
			     				<h:outputText id="sortOrder" value="#{categoryBean.selected.sortOrder} "/>
			     			</h:panelGrid> 
		     			</p:outputPanel>
		     		</p:tab>
	
    				<p:tab title="Medias"> 
    					<h:form id="mediasForm">  			 
						    <p:dataTable id="mediaTable" var="media" value="#{categoryBean.selected.medias}" width="600">  
						        <p:column>  
						            <f:facet name="header">  
						                    Release Id  
						            </f:facet>  
						            <h:outputText value="#{media.releaseId}" />  
						        </p:column>  	  
						        <p:column>  
						            <f:facet name="header">  
						                    Media Title 
						            </f:facet>  
								    <h:outputText value="#{media.title}" />  
						      	</p:column>					      	
						        <p:column>  
						            <f:facet name="header">  
						                    Media Id 
						            </f:facet>  
								    <h:outputText value="#{media.id}" />  
						      	</p:column>
						        <p:column>  
						            <f:facet name="header">  
						                    Yospace Id
						            </f:facet>  
								    <h:outputText value="#{media.mobileId}" />  
						      	</p:column>					      			      							      	
						    </p:dataTable>
						</h:form>
        			</p:tab>
        					
        			<p:tab title="Sponsors">
   						<h:form id="sponsorForm">  			 
						    <p:dataTable id="sponsorTable" var="sponsor" value="#{categoryBean.selected.sponsors}" width="600">  
						        <p:column>  
						            <f:facet name="header">  
						                    Url
						            </f:facet>  
						            <h:outputText value="#{sponsor.url}" />  
						        </p:column>  	  
						        <p:column>  
						            <f:facet name="header">  
						                    Image Url
						            </f:facet>  
								    <h:outputText value="#{sponsor.imageUrl}" />  
						      	</p:column>	
						     </p:dataTable>
						 </h:form>				      	        			
        			</p:tab>
        		</p:accordionPanel>				     				     				     								
	        </p:dialog>
        </h:form>
	</ui:define>
</ui:composition>